<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="iconfont.css">
    <style>
        /* 轮播图容器，设置固定宽高并居中显示 */
        .container {
            width: 500px;
            height: 300px;
            overflow: hidden;

            margin: calc((100vh - 300px) / 2) auto 0 auto;
            position: relative;
            outline: 10px solid rgb(25, 12, 12);
        }

        /* 轮播图列表容器，使用flex布局实现水平排列 */
        .arrow_list {
            display: flex;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: -1;
        }

        /* 每个轮播项的样式，占满容器宽度 */
        .arrow {
            width: 100%;
            height: 100%;
            
            flex: 0 0 100%;
            text-align: center;
            line-height: 150px;
        }

        /* 左右箭头按钮的通用样式 */
        .carousel-arrow-left,
        .carousel-arrow-right {
            width: 40px;
            height: 40px;
            text-align: center;
            border-radius: 50%;
            background: rgb(147, 144, 144, 0.5);
            line-height: 40px;

            color: black;
            cursor: pointer;
        }

        /* 左箭头定位 */
        .carousel-arrow-left {
            position: absolute;
            left: 20px;
            top: 40%;
        }

        /* 右箭头定位 */
        .carousel-arrow-right {
            position: absolute;
            right: 20px;
            top: 40%;
        }

        /* 图标字体样式设置 */
        .iconfont::before {
            font-size: 2em;
            color: white;
            opacity: 0.3;
        }

        /* 指示器容器定位在底部中央 */
        .dotList {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

        /* 每个指示器的样式 */
        .dotList span {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid white;
            margin: 0 5px;
        }

        /* 激活状态的指示器样式 */
        .active {
            background: white;
        }
        
        /* 图片样式，确保填充整个容器 */
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 轮播图列表容器 -->
        <div class="arrow_list">
            <!-- 每个div代表一个轮播项，包含一张图片 -->
            <div class="arrow left  ">
                <img src="./刘亦菲时尚摄影4k壁纸3840x2400.jpg" alt="刘亦菲时尚摄影4k壁纸3840x2400">
            </div>
            <div class="arrow minddle ">
                <img src="./国风大典 粉色古装可爱美女黄玉瑶4k壁纸3840x2400.jpg" alt="粉色古装可爱美女黄玉瑶4k壁纸3840x2400">
            </div>
            <div class="arrow right ">
                <img src="./梦境唯美王楚然4K壁纸 3840x2400.jpg" alt="梦境唯美王楚然4K壁纸">
            </div>
        </div>
        
        <!-- 右侧切换按钮 -->
        <div class="carousel-arrow-right">
            <span class="iconfont icon-arrow-forward"></span>
        </div>
        
        <!-- 左侧切换按钮 -->
        <div class="carousel-arrow-left">
            <span class="iconfont icon-arrow-back"></span>
        </div>
        
        <!-- 底部指示器 -->
        <div class="dotList">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <script>
        // 获取DOM元素对象集合
        const doms = {
            carouselList: document.querySelector('.arrow_list '),  // 轮播图列表容器
            arrowLeft: document.querySelector('.carousel-arrow-left'),  // 左箭头按钮
            arrowRight: document.querySelector('.carousel-arrow-right'),  // 右箭头按钮
            indicators: document.querySelectorAll('.dotList span')  // 所有指示器
        }

        const count = doms.indicators.length; // 获取轮播图数量（3张）
        let currntIndex = 0; // 当前显示的轮播图索引，初始为0
        
        /**
         * 初始化轮播图
         * 通过克隆首尾元素实现无缝轮播效果
         */
        function init() {
            // 克隆最后一个元素并插入到最前面
            const last = doms.carouselList.lastElementChild.cloneNode(true);
            // 克隆第一个元素并添加到末尾
            const first = doms.carouselList.firstElementChild.cloneNode(true);
            doms.carouselList.appendChild(first);
            doms.carouselList.insertBefore(last, doms.carouselList.firstElementChild);
            // 设置最后一个元素的左边距为-100%，用于实现无缝循环
            last.style.marginLeft = '-100%';
        }
        
        // 执行初始化
        init();
        
        /**
         * 移动到指定索引的轮播图
         * @param {Number} index - 要移动到的索引位置
         */
        function moveTo(index) {
            currntIndex = index;
            // 使用transform实现水平移动
            doms.carouselList.style.transform = `translateX(-${index * 100}%)`;
            // 添加过渡动画效果
            doms.carouselList.style.transition = 'transform 0.5s ease';
            // 更新指示器状态
            doms.indicators.forEach((item, i) => {
                item.classList.toggle('active', i === index);
            })
        }

        // 为每个指示器添加点击事件监听器
        doms.indicators.forEach((item, i) => {
            item.addEventListener('click', () => {
                moveTo(i);
            })
        })

        /**
         * 向左切换（显示前一张图片）
         */
        function left() {
            // 如果当前是第一张图片（索引为0），则需要跳转到最后一张
            if (currntIndex == 0) {
                // 取消过渡效果，瞬间跳转到最后一个克隆元素
                doms.carouselList.style.transition = 'none';
                doms.carouselList.style.transform = `translateX(-${count * 100}%)`;
                doms.carouselList.offsetWidth; // 强制刷新DOM
                // 移动到真实的最后一张图片
                moveTo(count - 1);
                currntIndex = count - 1;
            } else {
                // 正常向前切换
                moveTo(currntIndex - 1);
            }
        }
        
        /**
         * 向右切换（显示下一张图片）
         */
        function right() {
            // 如果当前是最后一张图片，则需要跳转到第一张实现循环
            if (currntIndex == count - 1) {
                // 取消过渡效果，瞬间跳转到第一个克隆元素
                doms.carouselList.style.transition = 'none';
                doms.carouselList.style.transform = `translateX( 100%)`;
                doms.carouselList.offsetWidth; // 强制刷新DOM
                // 移动到真实的第一张图片
                moveTo(0);
                currntIndex = 0;
            } else {
                // 正常向后切换
                moveTo(currntIndex + 1);
            }
        }

        // 为左右箭头添加点击事件监听器
        doms.arrowLeft.addEventListener('click', left);
        doms.arrowRight.addEventListener('click', right);
        
        // 设置定时器，每3秒自动切换到下一张图片
        setInterval(() => {
            // 如果当前是最后一张，则调用right方法实现循环
            if(currntIndex == count-1){
                right();
            }else{
                // 否则正常切换到下一张
                moveTo(currntIndex + 1);
            }
        }, 3000);
    </script>
</body>

</html>